import React, { useEffect, useState } from "react";
import Headers from '../../compoents/Header'
import './index.scss';
import instance from '../../utlis/index';
import {Badge , Button, Space, Table } from 'antd';
import type { TableProps, } from 'antd';

interface RecordType {
  id: number;
  firstName: string;
  lastName: string;
  age: number;
  address1: string;
  address2: string;
  address3: string;
}

const fixedColumns: TableProps<RecordType>['columns'] = [
  {
    title: '标题',
    dataIndex: 'title',
    width: 50,
    fixed: 'left',
  },
  {
    title: '状态',
    dataIndex: 'comment',
    width: 50,
    fixed: 'left',
     render: (statu) => <Badge status="success" text={statu?"发布":'草稿'} />
  },
  {
    title: '分类',
    dataIndex: 'classify',
    width: 50,
    fixed: 'left',
  },
  {
    title: '标签',
    dataIndex: 'tag',
    width: 50,
    fixed: 'left',
  },
  {
    title: '阅读量',
    dataIndex: 'reading',
    width: 50,
    fixed: 'left',
  
  },
  {
    title: '喜欢数',
    dataIndex: 'love',
     width: 50,
     fixed: 'left',
   
  },
  {
    title: '发布时间',
    dataIndex: 'date',
     width: 50,
  },
  {
    title: '操作',
    width: 100,
    fixed: 'right',
    render: () => (
      <Space>
        <Button>删除</Button>
        <Button>首焦推荐</Button>
        <Button>查看访问</Button>
        <Button>编辑</Button>
      </Space>
    ),
  },
];

const columns: TableProps<RecordType>['columns'] = [
  {
    title: '12345',
    dataIndex: 'id',
    width: 100,
  },
  {
    title: 'FistName',
    dataIndex: 'firstName',
    width: 100,
  },
  {
    title: 'LastName',
    dataIndex: 'lastName',
    width: 100,
  },
];

const Index=()=>{
  const text = '文章管理'
    const [tableList,setTableList] = useState([])
    console.log(tableList)
    const getallArticles=async()=>{
       try {
        const config = {
        url:'/api/get_allArticles',
        method:'get',
      }
       const res = await instance(config)
       const {data} = res
       setTableList(data.data)
       } catch (error) {
           console.log(error)
       }
      
    }
      const [fixed, setFixed] = React.useState(true);
      const [bordered, setBordered] = React.useState(true);
      const [expanded, setExpanded] = React.useState(false);

      const tblRef: Parameters<typeof Table>[0]['ref'] = React.useRef(null);

      const mergedColumns = React.useMemo<typeof fixedColumns>(() => {
        if (!fixed) {
          return columns;
        }

        if (!expanded) {
          return fixedColumns;
        }

        return fixedColumns.map((col) => ({ ...col, onCell: undefined }));
      }, [expanded, fixed]);

      const expandableProps = React.useMemo<TableProps<RecordType>['expandable']>(() => {
        if (!expanded) {
          return undefined;
        }

        return {
          columnWidth: 48,
          expandedRowRender: (record) => <p style={{ margin: 0 }}>🎉 Expanded {record.address1}</p>,
          rowExpandable: (record) => record.id % 2 === 0,
        };
      }, [expanded]);


    useEffect(()=>{
      getallArticles()
    },[])
    return(
        <div className="container">
            <Headers text={text}></Headers>
            <div className="content">
                <div className="content-top" >
                          <div style={{display:'flex'}}>
                            <p>标题</p>
                            <input type="text" placeholder="请输入文章标题" />
                          </div>

                           <div>
                            <p>分类</p>
                             <select name="" id="">
                                <option value="">请选择</option>
                                <option value="">草稿</option>
                                <option value="">发布</option>
                            </select>
                           </div>
                        
                            <div>
                                <p>分类</p>
                              <select name="" id="">
                                 <option value="">请选择</option>
                                <option value=""></option>
                            </select>     
                           </div>     
                           <div>
                             <button className="search">搜索</button> 
                             <button className="reset">重置</button>
                            </div>     
                </div>
                 <div className="allArtcles">
                                    <div style={{ padding: 64 }}>
                      <Space direction="vertical" style={{ width: '100%' }}>

                        <Table
                          bordered={bordered}
                          virtual
                          columns={mergedColumns}
                          scroll={{ x: 2000, y: 400 }}
                          rowKey="id"
                          dataSource={tableList}
                          pagination={false}
                          ref={tblRef}
                          rowSelection={
                            expanded
                              ? undefined
                              : {
                                  type: 'radio',
                                  columnWidth: 48,
                                }
                          }
                          expandable={expandableProps}
                        />
                      </Space>
                    </div>
                 </div>
            </div>
        </div>
       
    )
}
export default Index